<template>
  <div class="event-wrapper" @click.self="addPoint">
      <button @click="add">ADD</button><br/>

      <!-- 监听事件 v-on:事件名称   v-on:可以缩写成@ -->
      <button v-on:click="onClick">不加参数</button><br/>

      <button @click="onClick('我是参数')">添加参数</button><br/>

      <!-- 不传参时，Vue 默认 -->
      <button v-on:click="onClick()">添加空参数</button><br/>

      <button v-on:click="onClick($event)">添加$event参数</button><br/>

      <input type="text" v-on:input="onInput" @change="onInput" @blur="onInput" />



      <ul>
        <li v-for="d, i in list" :key="i" :style="{left: d.x + 'px', top: d.y + 'px'}"></li>
      </ul>


      <a href="https://baidu.com" target="_blank" @click.prevent.stop="goBaudu">百度</a>



      <!-- 回车/enter的时候触发 -->
      <form action="">
        <input type="text" placeholder="用户名">
        <input type="password" placeholder="密码" @keyup.enter="onInput">
      </form>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          num: 999,
          list: [{
            x: 100,
            y: 100
          }, {

          }]
        }
      },
      /***
       * this: 组件的实例
       * $el: 组件的根标签
       * Vue 会把 data 和 methods 中的属性展开，挂在 this 上面
       */
      methods: {
        add() {
          console.log(this);
          // 直接通过 this 访问 data
          this.num++
        },
        onClick(event) {
          // 事件监听时，默认的参数是事件对象
            console.log(event);
        },
        onInput(event) {
          console.log('当前输入的值', event.target.value, '事件名称', event.type);
            console.log(event);
        },
        addPoint(event) {
            // self 的原理就是判断 event.target 和 event.currentTarget 是否是同一个元素
            // if (event.target !== event.currentTarget) return;
            this.list.push({
              x: event.clientX,
              y: event.clientY
            })
        },
        goBaudu(event) {
            console.log(event)
            // event.preventDefault();
            event.stopPropagation();
        }
      }
    }

    // input 框如何监测中文输入法的确定
    /**
     * clientX / Y 可视区
     * screenX / Y 相对于电脑屏幕
     * pageX / Y 相当于页面
     *
     * event.type
     * event.target.value
     * copy()  chrome 提供  $
     */
</script>

<style scoped>
    .event-wrapper input {
      border: 1px solid #000;
    }
    .event-wrapper {
      min-height: calc(100vh - 80px);
    }
    .event-wrapper ul li {
      position: fixed;
      width: 10px;
      height: 10px;
      background: red;
    }
</style>
